<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div class="welcome-header">
            <h1>欢迎使用HRM人力资源管理系统</h1>
            <p>高效管理企业人力资源，优化组织效能</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #409EFF;">
              <i class="el-icon-user-solid"></i>
            </div>
            <div class="stat-info">
              <h3>员工总数</h3>
              <p class="stat-value">1,245</p>
              <p class="stat-change">较上月增加 5.2%</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #67C23A;">
              <i class="el-icon-s-custom"></i>
            </div>
            <div class="stat-info">
              <h3>待入职</h3>
              <p class="stat-value">28</p>
              <p class="stat-change">本周新增 12 人</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #E6A23C;">
              <i class="el-icon-s-opportunity"></i>
            </div>
            <div class="stat-info">
              <h3>待办事项</h3>
              <p class="stat-value">16</p>
              <p class="stat-change">今日新增 3 项</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="16">
        <el-card>
          <h2>月度入职统计</h2>
          <div class="chart-container">
            <div class="chart-placeholder">
              <i class="el-icon-data-analysis"></i>
              <p>入职统计图表</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card>
          <h2>最新动态</h2>
          <div class="activity-list">
            <div v-for="(item, index) in activities" :key="index" class="activity-item">
              <div class="activity-icon">
                <i :class="item.icon" :style="{color: item.color}"></i>
              </div>
              <div class="activity-content">
                <p>{{ item.content }}</p>
                <span class="activity-time">{{ item.time }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'Dashboard',
  setup() {
    const activities = ref([
      {
        icon: 'el-icon-s-custom',
        color: '#409EFF',
        content: '张明已完成入职手续',
        time: '10分钟前'
      },
      {
        icon: 'el-icon-s-promotion',
        color: '#67C23A',
        content: '李华的调动申请已批准',
        time: '2小时前'
      },
      {
        icon: 'el-icon-s-release',
        color: '#E6A23C',
        content: '王芳提交了离职申请',
        time: '5小时前'
      },
      {
        icon: 'el-icon-s-flag',
        color: '#F56C6C',
        content: '新职位发布：前端开发工程师',
        time: '昨天'
      }
    ]);

    return {
      activities
    };
  }
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-header {
  text-align: center;
  padding: 30px 0;
}

.welcome-header h1 {
  font-size: 28px;
  margin-bottom: 10px;
  color: #333;
}

.welcome-header p {
  font-size: 16px;
  color: #666;
}

.mt-20 {
  margin-top: 20px;
}

.stat-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon i {
  font-size: 28px;
  color: white;
}

.stat-info h3 {
  margin: 0;
  font-size: 16px;
  color: #666;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin: 5px 0;
  color: #333;
}

.stat-change {
  margin: 0;
  font-size: 12px;
  color: #999;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  text-align: center;
  color: #999;
}

.chart-placeholder i {
  font-size: 80px;
  opacity: 0.3;
  margin-bottom: 10px;
}

.activity-list {
  margin-top: 15px;
}

.activity-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.activity-icon i {
  font-size: 20px;
}

.activity-content {
  flex: 1;
}

.activity-content p {
  margin: 0 0 5px 0;
}

.activity-time {
  font-size: 12px;
  color: #999;
}
</style>